<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>加入逐星科技社 - 申请表单</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF',
                        secondary: '#69b1ff',
                        dark: '#0f172a',
                        light: '#f8fafc'
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .bg-glass {
                background: rgba(15, 23, 42, 0.7);
                backdrop-filter: blur(10px);
            }
            .form-input-focus {
                @apply focus:border-primary focus:ring-2 focus:ring-primary/30 focus:outline-none;
            }
            .btn-hover {
                @apply hover:bg-primary/90 hover:shadow-lg hover:shadow-primary/20 transform transition-all duration-300 transform hover:-translate-y-0.5;
            }
        }
    </style>
</head>
<body class="bg-dark text-light min-h-screen">
    <!-- 导航栏 -->
    <header class="fixed top-0 left-0 right-0 z-50 bg-glass border-b border-gray-800 transition-all duration-300" id="navbar">
        <div class="container mx-auto px-4 py-3 flex items-center justify-between">
            <div class="flex items-center">
                <img src="images/第一版团标.png" alt="逐星科技社团标" class="w-20 h-15 mr-3">
                <h1 class="text-xl font-bold">逐星科技社</h1>
            </div>

            <!-- 桌面导航 -->
            <nav class="hidden md:flex space-x-8">
                <a href="index.html" class="hover:text-primary transition-colors py-1">首页</a>
                <a href="about.html" class="hover:text-primary transition-colors py-1">关于我们</a>
                <a href="activities.html" class="hover:text-primary transition-colors py-1">社团活动</a>
                <a href="culture.html" class="hover:text-primary transition-colors py-1">社团文化</a>
                <a href="council.html" class="hover:text-primary transition-colors py-1">理事会</a>
                <a href="regulations.html" class="hover:text-primary transition-colors py-1">规章制度</a>
                <a href="join.html" class="text-primary border-b-2 border-primary py-1">加入我们</a>
                <a href="thanks.html" class="hover:text-primary transition-colors py-1">特别感谢</a>
            </nav>

            <!-- 移动端菜单按钮 -->
            <button class="md:hidden text-2xl" id="menuBtn">
                <i class="fa fa-bars"></i>
            </button>
        </div>

        <!-- 移动端导航菜单 -->
        <div class="md:hidden hidden bg-dark border-t border-gray-800" id="mobileMenu">
            <div class="container mx-auto px-4 py-3 flex flex-col space-y-4">
                <a href="index.html" class="hover:text-primary transition-colors py-2">首页</a>
                <a href="about.html" class="hover:text-primary transition-colors py-2">关于我们</a>
                <a href="activities.html" class="hover:text-primary transition-colors py-2">社团活动</a>
                <a href="culture.html" class="hover:text-primary transition-colors py-2">社团文化</a>
                <a href="council.html" class="hover:text-primary transition-colors py-2">理事会</a>
                <a href="regulations.html" class="hover:text-primary transition-colors py-2">规章制度</a>
                <a href="join.html" class="text-primary py-2">加入我们</a>
                <a href="thanks.html" class="text-primary py-2">特别感谢</a>
            </div>
        </div>
    </header>

    <!-- 页面标题 -->
    <section class="pt-32 pb-16 px-4 border-b border-gray-800">
        <div class="container mx-auto max-w-6xl">
            <h1 class="text-[clamp(2rem,5vw,3rem)] font-bold mb-4">加入逐星科技社</h1>
            <p class="text-gray-400 max-w-3xl">
                填写下方表单加入我们，我们会尽快与你联系
            </p>
        </div>
    </section>

    <!-- 报名表单 -->
    <section class="py-16 px-4">
        <div class="container mx-auto max-w-2xl">
            <div class="bg-gray-800/20 p-8 rounded-xl border border-gray-700">
                <form id="joinForm" class="space-y-6">
                    <div>
                        <label for="name" class="block text-sm font-medium text-gray-300 mb-1">姓名 <span class="text-red-500">*</span></label>
                        <input type="text" id="name" name="name" required
                            class="w-full px-4 py-3 bg-gray-900 border border-gray-700 rounded-lg text-light form-input-focus">
                    </div>

                    <div>
                        <label for="grade" class="block text-sm font-medium text-gray-300 mb-1">年级班级 <span class="text-red-500">*</span></label>
                        <input type="text" id="grade" name="grade" required
                            class="w-full px-4 py-3 bg-gray-900 border border-gray-700 rounded-lg text-light form-input-focus"
                            placeholder="例如：高一(1)班">
                    </div>

                    <div>
                        <label for="phone" class="block text-sm font-medium text-gray-300 mb-1">联系电话 <span class="text-red-500">*</span></label>
                        <input type="tel" id="phone" name="phone" required
                            class="w-full px-4 py-3 bg-gray-900 border border-gray-700 rounded-lg text-light form-input-focus">
                    </div>

                    <div>
                        <label for="interest" class="block text-sm font-medium text-gray-300 mb-1">感兴趣的方向 <span class="text-red-500">*</span></label>
                        <select id="interest" name="interest" required
                            class="w-full px-4 py-3 bg-gray-900 border border-gray-700 rounded-lg text-light form-input-focus">
                            <option value="">请选择</option>
                            <option value="programming">编程开发</option>
                            <option value="tech">科技创新</option>
                            <option value="design">设计创意</option>
                            <option value="management">社团管理</option>
                            <option value="other">其他方向</option>
                        </select>
                    </div>

                    <div>
                        <label for="experience" class="block text-sm font-medium text-gray-300 mb-1">相关经验（可选）</label>
                        <textarea id="experience" name="experience" rows="4"
                            class="w-full px-4 py-3 bg-gray-900 border border-gray-700 rounded-lg text-light form-input-focus"
                            placeholder="请简述你的相关经验或技能，没有可以不填"></textarea>
                    </div>

                    <div>
                        <label for="reason" class="block text-sm font-medium text-gray-300 mb-1">加入理由 <span class="text-red-500">*</span></label>
                        <textarea id="reason" name="reason" rows="3" required
                            class="w-full px-4 py-3 bg-gray-900 border border-gray-700 rounded-lg text-light form-input-focus"
                            placeholder="请简述你想加入社团的理由"></textarea>
                    </div>

                    <div class="pt-4">
                        <button type="submit"
                            class="w-full bg-primary text-white font-medium py-3 px-6 rounded-lg btn-hover">
                            提交申请
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </section>

    <!-- 页脚 -->
    <footer class="bg-gray-900 border-t border-gray-800 py-12 px-4 mt-16">
        <div class="container mx-auto max-w-6xl">
            <div class="flex flex-col md:flex-row justify-between mb-10">
                <div class="mb-8 md:mb-0">
                    <div class="flex items-center mb-4">
                        <img src="images/第一版团标.png" alt="逐星科技社团标" class="w-20 h-15 mr-3">
                        <h3 class="text-xl font-bold">逐星科技社</h3>
                    </div>
                    <p class="text-gray-400 max-w-md">
                        探索未知、勇敢创新，逐星科技社致力于为每一位对科学与技术怀有热情的学生提供广阔的学习平台。
                    </p>
                </div>

                <div class="grid grid-cols-2 md:grid-cols-3 gap-8">
                    <div>
                        <h4 class="text-lg font-semibold mb-4">快速链接</h4>
                        <ul class="space-y-2">
                            <li><a href="index.html" class="text-gray-400 hover:text-primary transition-colors">首页</a></li>
                            <li><a href="about.html" class="text-gray-400 hover:text-primary transition-colors">关于我们</a></li>
                            <li><a href="activities.html" class="text-gray-400 hover:text-primary transition-colors">社团活动</a></li>
                            <li><a href="join.html" class="text-gray-400 hover:text-primary transition-colors">加入我们</a></li>
                        </ul>
                    </div>

                    <div>
                        <h4 class="text-lg font-semibold mb-4">资源中心</h4>
                        <ul class="space-y-2">
                            <li><a href="regulations.html" class="text-gray-400 hover:text-primary transition-colors">规章制度</a></li>
                            <li><a href="culture.html" class="text-gray-400 hover:text-primary transition-colors">社团文化</a></li>
                            <li><a href="council.html" class="text-gray-400 hover:text-primary transition-colors">理事会成员</a></li>
                        </ul>
                    </div>

                    <div>
                        <h4 class="text-lg font-semibold mb-4">联系我们</h4>
                        <ul class="space-y-2">
                            <li class="flex items-center">
                                <i class="fa fa-envelope text-primary mr-2"></i>
                                <a href="mailto:zhuxing@example.com" class="text-gray-400 hover:text-primary transition-colors">boluochuixue@outlook.com</a>
                            </li>
                            <li class="flex items-center">
                                <i class="fa fa-qq text-primary mr-2"></i>
                                <span class="text-gray-400">1465153649</span>
                            </li>
                            <li class="flex items-center">

                            </li>
                        </ul>
                    </div>
                </div>
            </div>

            <div class="border-t border-gray-800 pt-8 text-center text-gray-500 text-sm">
                <p>© 2024 逐星科技社 版权所有 | 新宁一中逐星科技合作社</p>
            </div>
        </div>
    </footer>

    <script>
        // 移动端菜单切换
        document.getElementById('menuBtn').addEventListener('click', function() {
            const mobileMenu = document.getElementById('mobileMenu');
            mobileMenu.classList.toggle('hidden');
        });

        // 导航栏滚动效果
        window.addEventListener('scroll', function() {
            const navbar = document.getElementById('navbar');
            if (window.scrollY > 50) {
                navbar.classList.add('py-2');
                navbar.classList.remove('py-3');
                navbar.classList.add('shadow-lg');
            } else {
                navbar.classList.add('py-3');
                navbar.classList.remove('py-2');
                navbar.classList.remove('shadow-lg');
            }
        });

        // 表单输入提示
        const formInputs = document.querySelectorAll('#joinForm input, #joinForm select, #joinForm textarea');
        formInputs.forEach(input => {
            input.addEventListener('input', function() {
                alert('很抱歉，线上招募功能待完善，请联系管理员');
            });
        });

        // 表单提交处理
        document.getElementById('joinForm').addEventListener('submit', function(e) {
            e.preventDefault();
            alert('很抱歉，线上招募功能待完善，请联系管理员');
        });
    </script>
</body>
</html>
